<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>左右改变大小</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
    <style>
.resize-container{width:100%;height:240px;background: #00BCD4;}
.resize-drag{border:1px solid #29e;color:#fff;font-size:20px;width:1px;height: 1px;overflow:hidden;}
  	</style>
</head>
<body>
	<div class="resize-container" @mousemove="moveFn">
		  <div class="resize-drag">
     			<!--从任何边缘或角落调整大小-->
  		 </div>
	</div>
	
	
	
	<script src="dist/interact.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
    	var wrap;
  var app =   new Vue({
    	el:'.resize-container',
    	data:{
    		move:true
    	},
    	
    	methods:{
    		moveFn:function(e){
    			if(!this.move)return;
    			!wrap &&(wrap = document.querySelector('.resize-drag'));    			
    			wrap.style.webkitTransform = wrap.style.transform
    			= 'translate('+e.x+'px,'+e.y+'px)' ;
    			wrap.setAttribute('data-x', e.x);
    			wrap.setAttribute('data-y', e.y);
    			console.log( e.x,e.y) ; 
    		}
    	}
    });
    interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener,
    restrict: {
      restriction: 'parent',
      elementRect: { top: 0, left: 0, bottom: 0, right: 0 }
    }
  })
  .resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: true, top: true },

    // keep the edges inside the parent
    restrictEdges: {
      outer: 'parent',
      endOnly: true,
    },

    // minimum size
    restrictSize: {
      min: { width: 1, height: 1 },
    },

    inertia: true,
  }).on('resizeend',function(){
  	console.log('缩放结束了') ;
  }).on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);
		app.move=false ;
    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
  });
  
    function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    console.log('移动了');
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;
    </script>
</body>
</html>